import { Button, Checkbox, Col, Form, Input, Row } from 'antd';
import { LockOutlined, UnlockOutlined, UserOutlined } from '@ant-design/icons';
import React from 'react';
import "./RightCol.css"
import { history } from '../../.umi/core/history';

class RightCol extends React.PureComponent {
  constructor(props) {
    super(props);
  }

  onFinish=(values)=>{
    let url="http://1.94.134.166:8805/login?username=admin&password=123456";
    const config={method:'POST'};
    fetch(url,config)
      .then(response => response.json())
      .then(res => {
        if(res.code==0){
          localStorage.setItem('Authorization','Bearer '+res.data.token);
          history.push('/Demo2');
        }
        console.log(res);
      });
  };


  render() {
    return (
      <>
        {/* 登录表单 */}
        <div className="form_title">用户登录</div>
        <div className="div_form_inputarea">
          <Form
            name="basic"
            wrapperCol={{
              span: 24,
            }}
            initialValues={{
              username: 'admin', // 默认用户名
              password: '123456', // 默认密码
            }}
            onFinish={this.onFinish}
          >
            <Form.Item
              name="username"
              rules={[{required: true, message: '请输入用户名!'}]}
            >
              <Input size="large" placeholder="请输入用户名" className="form_username" prefix={<UserOutlined/>}/>
            </Form.Item>

            <Form.Item
              name="password"
              rules={[{required: true, message: '请输入密码!'}]}
            >
              <Input.Password size="large" placeholder="请输入密码" className="form_password" prefix={<LockOutlined/>}/>
            </Form.Item>

            {/* 验证码区域 */}
            <Row className="verify">
              <Col span={16}>
                <div className="verify_left">
                  <Form.Item>
                    <Input size="large" placeholder="请输入验证码" className="verify_code"/>
                  </Form.Item>
                </div>
              </Col>
              <Col span={8}>
                <div className="verify_right">
                  <Form.Item
                    name="captcha_display"
                  >
                    <Input size="large" placeholder="3319" className="verify_display"/>
                  </Form.Item>
                </div>
              </Col>
              {/*<Col span={8}>*/}
              {/*  <div className="verify_right">*/}
              {/*    <Form.Item>*/}
              {/*      <Button type="primary" htmlType="button" className="verify_code_button">*/}
              {/*        获取验证码*/}
              {/*      </Button>*/}
              {/*    </Form.Item>*/}
              {/*  </div>*/}
              {/*</Col>*/}
            </Row>

            <Form.Item
              wrapperCol={{span: 24}}
            >
              <div className="div_submit">
                <Button type="primary" htmlType="submit" className="submit">
                  登录
                </Button>
              </div>
            </Form.Item>

          </Form>
        </div>
      </>)
  }
}


export default RightCol;
